<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>app</h1>
        <book name="三国演义"></book>

    </div>
    <hr/>
    <div id="app2">
        <h1>app2</h1>
        <!-- app2中不能使用app上全局注册的组件 -->
        <!-- <book name="三国演义"></book> -->
        <comments></comments>
    </div>

</body>
</html>
<script src="./js/vue.global.js"></script>
<script>

    let Book = {
        props:["name"],
        template:`
            <h1>书籍信息</h1>
            <div>
                <p>书名：{{name}}</p>
                <p>作者：{{author}}</p>
            </div>
            <hr/>
            <comments></comments>
        `,
        data(){
            return {
                author:"罗贯中"
            }
        }
    }

    let Comments={
        template:`
            <h3>书籍的评论</h3>
            <ul>
                <li>
                    <p></p>
                </li>
            </ul>
        `
    }

     let app = Vue.createApp({
        data(){
            return {
                msg:"hi",
                age:12                
            }
        }       
    });

    // book组件是在app上全局注册的。
    app.component("book",Book)
    app.component("comments",Comments);
    
    // app.component("book",Book).component("comments",Comments);

    app.mount("#app");


    let app2 = Vue.createApp({
        data(){
            return {}
        }
    }); 
    
    app2.mount("#app2");
    



</script>